<template>
	<view class="app">
		<quick-button></quick-button>
		<map style="width: 100%; height: 600rpx" :scale="11" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="markertap"></map>
		<view style="margin-top: 30rpx">
			<u-input placeholder="输入医养机构名称" v-model="searchForm.keyword">
				<template slot="suffix">
					<view style="height: 30rpx; border-left: 1px solid #ccc; padding-left: 10rpx; line-height: 30rpx" @click="getList">搜索</view>
				</template>
			</u-input>
		</view>
		<view style="display: flex; gap: 20rpx; align-items: center; margin: 20rpx 0">
			<uni-icons type="location" size="30" @click="pickerShow = true"></uni-icons>
			<uni-data-picker @change="areaChange" placeholder="全市" :localdata="areaData" v-model="searchForm.areaName" style="width: 300rpx"></uni-data-picker>
		</view>
		<view class="list" v-for="item in list" :key="item.institutionUid" @click="goDetails(item)">
			<image class="list-img" :src="item.headImg" mode=""></image>
			<view class="list-right">
				<view class="list-tit">
					{{ item.institutionName }}
				</view>
				<view class="list-item">
					<view class="">评分：4.9分</view>
					<view class="">37条</view>
				</view>
				<view class="list-item">地区：{{ item.areaName }}</view>
			</view>
		</view>
		<u-popup mode="bottom" :show="show" bgColor="transparent">
			<view style="height: 400rpx; border-radius: 30rpx; background: #fff; padding: 30rpx; margin: 30rpx">
				<view class="list">
					<image class="list-img" :src="form.headImg" mode=""></image>
					<view class="list-right">
						<view class="list-tit">
							{{ form.institutionName }}
						</view>
						<view class="list-item">
							<view class="">评分：4.9分</view>
							<view class="">37条</view>
						</view>
						<view class="list-item">地区：{{ form.areaName }}</view>
					</view>
				</view>
				<view style="display: flex; margin-top: 30rpx; gap: 200rpx; padding: 0 50rpx">
					<u-button size="mini" @click="show = false" text="取消"></u-button>
					<u-button size="mini" @click="goDetails(form)" type="primary" text="详情"></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { queryList } from '../common/api/medicalMaintenance.js';
export default {
	data() {
		return {
			latitude: 34.27,
			longitude: 108.93,
			covers: [],
			list: [],
			searchForm: {
				pageIndex: 1,
				pageSize: 10,
				keyword: '',
				areaName: ''
			},
			form: {},
			show: false,
			pickerShow: false,
			areaData: [
				{
					text: '雁塔区',
					value: '雁塔区'
				},
				{
					text: '高新区',
					value: '高新区'
				},
				{
					text: '莲湖区',
					value: '莲湖区'
				},
				{
					text: '未央区',
					value: '未央区'
				},
				{
					text: '新城区',
					value: '新城区'
				}
			]
		};
	},
	onShow() {
		this.getList();
	},
	methods: {
		goDetails(data) {
			uni.navigateTo({
				url: '/medicalMaintenance/pages/details/details?institutionUid=' + data.institutionUid
			});
		},
		getList() {
			queryList(this.searchForm)
				.then((res) => {
					this.list = res.data.data.rows;
					this.list.forEach((item, i) => {
						this.covers.push({
							id: i,
							callout: {
								content: item.institutionName,
								bgColor: '#fff',
								borderColor: '#aaa',
								borderWidth: 1,
								borderRadius: 10,
								padding: 3,
								display: 'ALWAYS',
								width: 100
							},
							latitude: item.lat,
							longitude: item.lng,
							iconPath: '../static/map-icon.png',
							width: 20,
							height: 20
						});
					});
				})
				.catch((err) => {
					console.log(err);
				});
		},
		markertap(e) {
			this.form = this.list[e.markerId];
			this.show = true;
		},
		search() {
			this.getList();
		},
		areaChange(e) {
			this.getList();
		}
	}
};
</script>

<style scoped>
.app {
	padding: 30rpx;
}

.list {
	display: flex;
	gap: 20rpx;
	padding: 30rpx 0;
	border-bottom: 1px solid #eee;
}

.list-img {
	width: 240rpx;
	height: 180rpx;
	border-radius: 20rpx;
}

.list-right {
	width: 440rpx;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.list-item {
	display: flex;
	gap: 20rpx;
	color: #999;
}
</style>
